<template>
  <div>
    <!-- 模糊查询表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分享名称">
        <el-input
          v-model="formInline.share_title"
          placeholder="请输入搜索关键字"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider content-position="left">分享列表</el-divider>

    <div class="listMain">
      <!-- 分享列表的组件 -->
      <shareList
        class="shareList"
        v-for="(item, i) in lists"
        :key="item.i"
        :pic="item.share_picture"
        :title="item.share_title"
        :userpic="item.share_userPhoto"
        :userName="item.share_userName"
        :like="item.share_like"
        :id="item.share_id"
        :showon="item.share_show"
        v-if="item.share_show"
        @getShareByUserId="getShareByUserId(item.share_userId)"
      ></shareList>
    </div>
    <p v-if="this.lists == undefined">找不到此类分享，请换一个试试吧!</p>
  </div>
</template>

<script>
import httpApi from "@/http";
import shareList from "../../components/shareList.vue";
import Url from "../../http/BaseUrl";
export default {
  components: { shareList },
  data() {
    return {
      Url,
      lists: [],
      hj: 2,
      page: 1, // 默认页数
      isLoading: false, // 节流
      formInline: {
        share_title: "",
      },
    };
  },

  methods: {
    getShareByUserId(v) {
      this.$router.push({
        path: "square-user",
        query: { userId: v },
      });
    },
    onSubmit() {
      if (this.formInline.share_title == 0) {
        this.getList();
      } else {
        httpApi.ShareApi.getListByNameLike({
          wd: this.formInline.share_title,
        }).then((res) => {
          console.log(res);
          this.lists = res.data.data;
          console.log(this.lists);
        });
      }
    },
    // 获取列表
    getList() {
      // 打开
      if (this.isLoading == false) {
        this.isLoading = true;
        let params = { page: this.page, pagesize: 30 };
        httpApi.ShareApi.getList(params).then((res) => {
          this.lists = res.data.data[0];
          console.log(this.lists);
        });
        this.isLoading = false;
      } else {
        return;
      }
    },
    getLike() {
      if (this.share_love == 1) {
        this.share_love = 0;
        console.log(2);
      } else if (this.share_love == 0) {
        this.share_love = 1;
      }
    },
    
  },
  created() {
    this.getList(); // 加载分享列表
  },
};
</script>
<style lang="scss" scoped>
.listMain {
  display: flex;
  flex-wrap: wrap;
}
.shareList {
  margin: 1%;
  width: 8rem;
  height: 10rem;
}
.shareList :nth-child(4n) {
  margin-right: 0px;
}
.shareList :nth-child(4n + 1) {
  margin-left: 0px;
}
</style>
